<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title><%= title %></title>
		<style>
			#globalLoading {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				color: #000000d9;
				font-size: 14px;
				font-variant: tabular-nums;
				line-height: 1.5715;
				list-style: none;
				font-feature-settings: 'tnum';
				position: absolute;
				display: none;
				color: #1890ff;
				text-align: center;
				vertical-align: middle;
				opacity: 0;
				transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
				position: static;
				display: inline-block;
				opacity: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			#globalLoading .spin {
				position: relative;
				display: inline-block;
				font-size: 20px;
				width: 1em;
				height: 1em;
				transform: rotate(45deg);
				animation: antRotate 1.2s infinite linear;
				font-size: 32px;
				margin-bottom: 10px;
			}
			#globalLoading .item {
				width: 14px;
				height: 14px;
				position: absolute;
				display: block;
				background-color: #1890ff;
				border-radius: 100%;
				transform: scale(0.75);
				transform-origin: 50% 50%;
				opacity: 0.3;
				animation: antSpinMove 1s infinite linear alternate;
			}
			#globalLoading .item:nth-child(1) {
				top: 0;
				left: 0;
			}
			#globalLoading .item:nth-child(2) {
				top: 0;
				right: 0;
				animation-delay: 0.4s;
			}
			#globalLoading .item:nth-child(3) {
				right: 0;
				bottom: 0;
				animation-delay: 0.8s;
			}
			#globalLoading .item:nth-child(4) {
				bottom: 0;
				left: 0;
				animation-delay: 1.2s;
			}
			@keyframes antSpinMove {
				to {
					opacity: 1;
				}
			}
			@keyframes antRotate {
				to {
					transform: rotate(405deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="globalLoading">
				<span class="spin">
					<i class="item"></i>
					<i class="item"></i>
					<i class="item"></i>
					<i class="item"></i>
				</span>
				<span class="text"><%= title %></span>
			</div>
		</div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>
